<template>
	<section id="about" style="margin-top: 40px;">
		<div class="about_menu w-75 m-auto">
			<ul>
				<li>
					<i class="iconfont icon-huabanfuben2"></i>					
					<div class="item-name">
						<h3>食品安全</h3>
						<a href="#">精选水果 严格质检</a>
						
					</div>
				</li>
				<li>
					<i class="iconfont icon-huabanfuben1"></i>
					
					<div class="item-name">
						<h3>鲜活天然</h3>
						<a href="#">绿色生态 商城精选</a>
					</div>
				</li>
				<li>
					<i class="iconfont icon-huabanfuben3"></i>
					
					<div class="item-name">
						<h3>产地直采</h3>
						<a href="#">限定产源 质量保证</a>
					</div>
				</li>
				<li>
					<i class="iconfont icon-huabanfuben"></i>				
					<div class="item-name">
						<h3>无忧售后</h3>
						<a href="#">优鲜赔 售后通道</a>
					</div>
				</li>
			</ul>
			<div class="about_phone">
				<h1>700 - 999 - 1000</h1>
				<h2>周一到周日 9:30 - 17:30</h2>
				<h2>(仅收市话费)</h2>
				<div class="online">
					<a href="#">
						<i class="iconfont icon-0-02"></i>
						<span>在线帮助</span>
					</a>
				</div>
			</div>
		</div>
		<div class="about_info w-75 m-auto">
			<ul>
				<li style="border-left: #FFFFFF solid 1px;">Copyright C 2020 smartisan.com版权所有</li>
				<li>水果商城隐私政策</li>
				<li>水果商城用户协议</li>
				<li>资质证照</li>
			</ul>
			<ul>
				<li style="border-left: #FFFFFF solid 1px;">京ICP 备 19048576号-1</li>
				<li><i class="iconfont icon-0-12"></i>京公网安备11010502039854号</li>
				<li>京食药网食备202010031</li>
			</ul>
		</div>
	</section>
</template>

<script>
</script>

<style scoped="scoped" lang="less" >
	#about {
		/* border: #202326 solid 1px; */
		width: 100%;
		margin-bottom: 0;

		margin-top: 20px;
		background-color: #FFFFFF;
		height: 340px;

		.about_menu {
			height: 226px;
			padding: 60px 0 20px;
			border-bottom: 1px solid #E2E6EA;		
			
			ul>li {
				float: left;
				display: flex;
				margin-right: 30px;
				margin-top: 40px;
				i{
					font-size: 40px;
					padding-right: 10px;
					color: #0069D9;
				}
				div {
					h3 {
						color: #646464;
						font-size: 700;
						font-size: 15px;
						// padding: 0 0 15px;
					}					

					a {
						display: block;
						color: #969696;
						font-size: 12px;
						padding: 4px 0;

						// &:hover {
						// 	color: #0069D9;
						// }s
					}
				}
			}

			.about_phone {
				right: 0;
				line-height: 34px;
				text-align: right;

				h1 {
					/*   position: relative;*/
					font-size: 18px;
					font-weight: 900;
					line-height: 1;
					cursor: default;
					color: #5079d9;
				}

				h2 {
					font-size: 12px;
					line-height: 1;
					color: #999;
					margin-top: 5px;
				}

				.online {
					float: right;
					top: 15px;

					a {
						display: block;
						width: 132px;
						height: 30px;
						line-height: 30px;
						background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f5f5f5));
						background: linear-gradient(#fcfcfc, #f5f5f5);
						cursor: pointer;
						font-weight: 700;
						margin-top: 15px;
						text-align: center;
						color: #5079d9;
						border: 1px solid #d0d0d0;
						border-radius: 5px;
						-webkit-box-sizing: border-box;
						box-sizing: border-box;

						span {
							font-size: 12px;
							height: 28px;
							line-height: 28px;
							vertical-align: top;
							display: inline-block;
						}
					}
				}
			}
		}

		.about_info {
			color: #434d55;
			font-size: 12px;
			padding: 30px 0 60px;

			ul>li {
				float: left;
				line-height: 12px;
				color: #bdbdbd;
				padding: 0 10px;
				border-left: 1px solid #ccc;
			}
		}
	}
</style>
